<template>
  <div class="user-order">
    <div style="width: 100%;height: 1rem;"></div>
    <div class="userOrder">
      <ul class="order-tab"style="position: fixed;top: 0;width: 100%;background-color: white;">
        <li
          v-for="(item,index) in tabs"
          :class="{active:index == num}"
          @click="tab(index)">{{item}}
        </li>
      </ul>
      <div class="tabCon">
        <!--<div-->
          <!--v-for='(itemCon,index) in tabContents'-->
          <!--v-show=" index == num">-->
        <div style="width: 100%;height: 2rem;"></div>
        <div>
          <div class="common-form"v-for="(item,index) in DataList"v-if="item.is_pay">
            <div class="order-shop"style=""@click="copen(index)">
              <!--<p class="order-shop-tel"><i></i>李东东的店铺 <em>等待付款</em></p>-->
              <a class="order-shop-info">
                <img :src="imgTitl+item.goods_image">
                <div>
                  <p>
                    <span style="display: block;float: left;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 90%;">{{item.goods_name}}</span>
                    <br>
                    <span style="display: block;">{{item.quantity}}件</span>
                  </p>
                  <p>
                  </p>
                  <!--<p>{{item.quantity}}件</p>-->
                  <p>{{(Number(item.price)*Number(Eleven)).toFixed(2)}} 积分</p>
                </div>
              </a>
              <div class="order-more">
                <p>共{{item.quantity}}件商品  合计：{{(Number(item.price	)*Number(Eleven)).toFixed(0)}} 积分</p>
              </div>
            </div>
          </div>
        </div>
        <div v-show="qu">
          <div style="width: 100%;height: 20px;"></div>
          <i class="el-icon-loading"style="font-size: 34px;text-align: center;margin-left: 45%;"></i>
        </div>
      </div>
      <div style="width: 100%;height: 1rem;"></div>
      <div style="width: 100%;height: 1rem;"></div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import axios from 'axios';
  import qs from 'qs';
  import { InfiniteScroll } from 'mint-ui';

  Vue.use(InfiniteScroll);

  export default {
    name:"UserOrder",
    data () {
      return {
        // tabs: ["全部", "待付款","待发货","待收货","待评价"],
        tabs: ["订单列表"],
        tabContents: ["馨厨S系列","内容二","内容三"],
        num: 0,
        imgTitl:'http://statics.76sd.com',
        DataList:[],
        scroll:'',
        flag:false,
        orderNum:'471',
        page:'1',
        Eleven:'1',
        qu:false,
      }
    },
    methods: {
      tab(index) {
        this.num = index;
      },
      copen(index){
        console.log(this.DataList[index].order_parent_sn);
        this.$router.push({name: 'Details', params: {order_parent_sn:this.DataList[index].order_parent_sn}});
        this.$router.push({name:'Details'});
      },
      send(){
        axios.post('index/user/integralOrder',qs.stringify({openid:localStorage.getItem("openid"),page:'2'})).then(re=>{
          this.DataList.push(re.data.data[0]);
          console.log(this.DataList);
        });
      },
      menu() {
      },
      Paging: function () {
        var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
        var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
        var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        if (pageHeight - viewportHeight - scrollHeight < 10) {
          this.page = Number(this.page)+Number(1);
          axios.post('index/user/integralOrder',qs.stringify({openid:localStorage.getItem("openid"),page:this.page})).then(re=>{
            for (var i=0; i<re.data.data.length; i++)
            {
              this.DataList.push(re.data.data[i]);
            };
          });
        }
      }
    },
    created(){
      axios.post('index/user/integralOrder',qs.stringify({openid:localStorage.getItem("openid")})).then(re=>{
        this.DataList = re.data.data;
        console.log(this.DataList)
      });

      if (this.DataList.length > 10){
        this.flag = false;
      } else {
        this.flag = true;
      }
    },
    mounted() {
      $(window).bind("scroll", this.Paging);
    }
  }
</script>


<style>
  .order-tab li {
    width: 20%;
    float: left;
    text-align: center;
    padding: 13px 0;
  }
  .active{
    color: #FC2847;
    font-weight: 600;
  }
  .order-shop,.order-pay{
    width: 94%;
    margin: 3% auto;
    display: inline-block;
    margin-left: 3%;
  }
  .order-shop-tel{
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 10px;
    font-weight: 600;
  }
  .order-shop-tel i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/cart.png) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    float: left;
    margin-right: 5px;
  }
  .order-shop-more{
    width: 100%;
    height: 38px;
    line-height: 38px;
    display: inline-block;
  }
  .order-shop div:nth-child(5) em,.order-shop div:nth-child(4) em,.order-shop div:nth-child(3) em,.order-shop div:nth-child(6) input{
    float: right;
  }

  .order-shop div:nth-child(6) input{
    width:100px;
    text-align: right;
    border:0;
    outline: none;
    padding: 10px 0;
  }
  .order-shop img{
    width:80px;
    height:80px;
    border-radius: 5px;
    float: left;
  }
  .order-shop-info{
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    margin-top:10px;
  }
  .order-shop-info div{
    float: left;
    margin-left: 2%;
    width: 71%;
  }
  .order-shop-info div p:nth-child(1){
    width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .order-shop-info div p:nth-child(2){
    color:#999;
    margin:10px 0;
    font-size:12px;
  }
  .order-shop-info div p:nth-child(3){
    color:#FE2746;
    font-weight: 600;
  }
  .order-shop-info div p:nth-child(3) del{
    color:#999;
    font-size:12px;
    font-weight: normal;
  }
  .order-shop-tel em{
    color: #FC2847;
    font-size:12px;
    float: right;
  }
  .order-more{
    width:100%;
    text-align: right;
  }
  .order-more p{
    font-size:12px;
  }
  .order-more-gary{
    height: 25px;
    line-height: 25px;
    border-radius: 20px;
    background-color: rgba(123, 123, 123, 0.08);
    color: #999;
    font-size: 12px;
    text-align: center;
    border: 1px solid rgba(238, 238, 238, 1);
    display: inline-block;
    padding: 0 10px;
    margin-top: 10px;
    margin-left: 10px;
  }
  .order-more-pink{
    height: 25px;
    line-height: 25px;
    border-radius: 20px;
    background-color: rgba(254, 39, 70, 0.08);
    color: #FC2847;
    font-size: 12px;
    text-align: center;
    border: 1px solid rgba(254, 39, 70, 0.08);
    display: inline-block;
    padding: 0 10px;
    margin-top: 10px;
    margin-left: 10px;
  }
</style>
